<template>
  <div class="table-box-content">
    <Table-Com
      ref="table"
      :columns="columns"
      :data-source="tableData"
      :options="options"
      :handleSelectionChange="tabSelect"
      :pagination="pagination"
      :query="query"
    >
      <template #func="scope">
        <el-button
          link
          type="primary"
          size="small"
          @click="handleClick(scope.row)"
        >
          Detail
        </el-button>
        <el-button type="primary" size="small" @click="handleClick(scope.row)">
          Detail
        </el-button>
      </template>
      <template #avger="scope">
        <el-avatar :size="50" :src="scope.row.avger ?? circleUrl" />
      </template>
      <template #expand="scope">
        {{ scope.row }}
      </template>
    </Table-Com>
  </div>
</template>

<script lang="ts" setup>
import { onBeforeMount, reactive, toRefs, ref } from "vue";
const table = ref();
const columns = [
  {
    prop: "date",
    label: "Date",
    width: "180",
  },
  {
    prop: "name",
    label: "Name",
    width: "180",
  },
  {
    prop: "address",
    label: "Address",
  },
  {
    type: "func",
    prop: "func",
    label: "Func",
    fixed: "right",
    width: "180",
  },
  {
    type: "avger",
    prop: "avger",
    label: "Avger",
    width: "180",
  },
  { type: "expand", label: "Expand", width: 100 },
];
var tableData = ref([]);
const options = {
  height: "100%",
  Index: true,
  mutiSelect: true,
};
const pagination = ref({
  total: 0,
  pageIndex: 1,
  pageSize: 15,
});
const TestTable = [
  {
    id: "1",
    date: "2016-05-03",
    name: "Lili",
    address: "No. 012, Grove St, Los Angeles",
    avger:
      "https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png",
  },
  {
    id: "2",
    date: "2016-05-02",
    name: "Tom",
    address: "No. 105, Grove St, Los Angeles",
  },
  {
    id: "3",
    date: "2016-05-04",
    name: "Jerry",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    id: "4",
    date: "2016-05-01",
    name: "Cat",
    address: "No. 279, Grove St, Los Angeles",
  },
  {
    id: "5",
    date: "2016-05-03",
    name: "Lili",
    address: "No. 012, Grove St, Los Angeles",
    avger:
      "https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png",
  },
  {
    id: "6",
    date: "2016-05-02",
    name: "Tom",
    address: "No. 105, Grove St, Los Angeles",
  },
  {
    id: "7",
    date: "2016-05-04",
    name: "Jerry",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    id: "8",
    date: "2016-05-01",
    name: "Cat",
    address: "No. 279, Grove St, Los Angeles",
  },
  {
    id: "9",
    date: "2016-05-03",
    name: "Lili",
    address: "No. 012, Grove St, Los Angeles",
    avger:
      "https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png",
  },
  {
    id: "10",
    date: "2016-05-02",
    name: "Tom",
    address: "No. 105, Grove St, Los Angeles",
  },
  {
    id: "11",
    date: "2016-05-04",
    name: "Jerry",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    id: "12",
    date: "2016-05-01",
    name: "Cat",
    address: "No. 279, Grove St, Los Angeles",
  },
  {
    id: "13",
    date: "2016-05-03",
    name: "Lili",
    address: "No. 012, Grove St, Los Angeles",
    avger:
      "https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png",
  },
  {
    id: "14",
    date: "2016-05-02",
    name: "Tom",
    address: "No. 105, Grove St, Los Angeles",
  },
  {
    id: "15",
    date: "2016-05-04",
    name: "Jerry",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    id: "16",
    date: "2016-05-01",
    name: "Cat",
    address: "No. 279, Grove St, Los Angeles",
  },
  {
    id: "17",
    date: "2016-05-03",
    name: "Lili",
    address: "No. 012, Grove St, Los Angeles",
    avger:
      "https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png",
  },
  {
    id: "18",
    date: "2016-05-02",
    name: "Tom",
    address: "No. 105, Grove St, Los Angeles",
  },
  {
    id: "19",
    date: "2016-05-04",
    name: "Jerry",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    id: "20",
    date: "2016-05-01",
    name: "Cat",
    address: "No. 279, Grove St, Los Angeles",
  },
];
const handleClick = (item) => {
  console.log(item);
};
const tabSelect = (data) => {
  console.log(data[0]?.name);
};
const query = () => {
  tableData.value = [];
  if (pagination.value.pageSize == 15) {
    if (pagination.value.pageIndex == 1) {
      tableData.value = TestTable.slice(0, 15);
    } else {
      tableData.value = TestTable.slice(15, 30);
    }
  } else {
    tableData.value = TestTable;
  }
  pagination.value.total = TestTable.length;
};

const state = reactive({
  circleUrl:
    "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
});

const { circleUrl } = toRefs(state);

onBeforeMount(() => {
  query();
});
</script>
<style scoped  lang="scss">
</style>
